<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="李军锋">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 400px;
            height: 550px;
            margin: 0 auto;
        }
      .box{
          width: 200px;
          height: 580px;
          border: 1px solid #998;
          /* margin: 0 auto; */
          
      }
      .small{
          height: 60px;
          background-color: gray;
          padding: 0;
      }
      .small p{
          text-align: center;
          line-height: 60px;
          font-size: 30px;
      }
      span{
          display: inline-block;
          width: 185px;
          height: 150px;
           margin: 10px; 
           position: relative;
           overflow: hidden;
      }
      img{
          position: absolute;
          
      }
      .two{
          left: 195px;
      }
      span div{
          width: 180px;
          height: 30px;
          background-color: orange;
           position: absolute; 
          bottom: 0;
          
      }
      span div p{
          text-align: center;
          line-height: 30px;
      }
    </style>
</head>
<body>
    <div class="body">
  <div class="box">
      <div class="small">
          <p>精品推荐</p>
      </div>
        <span ><img class="one" src="./img/1_1.jpg" alt="">
        <img class="two" src="./img/1_2.jpg" alt="">
        <div class="aa"><p>几何为网-极致绚烂</p></div>
        <div class="bb"><p>JUNY/济南布衣</p></div>
        </span>
        <span ><img class="one" src="./img/2_1.jpg" alt="">
        <img class="two" src="./img/2_2.jpg" alt="">
        <div class="aa"><p>几何为网-极致绚烂</p></div>
        <div class="bb"><p>JUNY/济南布衣</p></div>
        </span>
        <span><img class="one" src="./img/3_1.jpg" alt="">
        <img class="two" src="./img/3_2.jpg" alt="">
        <div class="aa"><p>几何为网-极致绚烂</p></div>
        <div class="bb"><p>JUNY/济南布衣</p></div>
        </span>
  </div>
</div>


  <script src="jquery.js"></script>
</body>
</html>
<script>
    $('span').mouseover(function(){
        console.log('aa');
      $(this).find('.one').stop().animate({left:-195},500);
      $(this).find('.two').stop().animate({left:0},500);
      $(this).find('.aa').stop().slideDown(500);
      $(this).find('.bb').stop().slideUp(500);
    //    console.log($('.aa').innerHeight)
    
    });
    $('span').mouseout(function(){
    $(this).find('.one').stop().animate({left:0},500);
    $(this).find('.two').stop().animate({left:195},500);
     $(this).find('.bb').stop().slideDown(500);
      $(this).find('.aa').stop().slideUp(500);
    
    });
</script>